import { Button, Card, List, Modal, Space } from "antd";
import { Config } from "./config";
import { useState } from "react";
import { RuleParam } from "./rules/types";
import { BuildParamList, ConfigParamList, ConsoleReportsParamList, OutputReportsParamList, ProcessorsParamList } from "./rules/global";
import EditParam from "./EditParam";

export interface ParamItemProps {
    cfg: Config;
    cate: string;
    param: RuleParam;
    onChange: (cfg: Config) => void;
}

function ParamItem(props: ParamItemProps) {
    return (
        <Card title={props.param.param} bordered={false} style={{ width: "100%" }} extra={
            <Button type="link" onClick={e => {
                e.stopPropagation();
                e.preventDefault();
                let cfg = props.cfg;
                if (cfg[props.cate] !== undefined) {
                    delete (cfg[props.cate] as any)[props.param.param];
                }
                props.onChange(cfg);
            }}>删除属性</Button>
        }>
            <p>默认值:&nbsp;{JSON.stringify(props.param.defaultValue)}</p>
            {props.param.demoValue !== undefined && (
                <p>参考值:&nbsp;{JSON.stringify(props.param.demoValue)}</p>
            )}
            <Space>
                <span>配置值</span>
                <EditParam value={(props.cfg[props.cate] as any)[props.param.param]} defaultValue={props.param.defaultValue}
                    demoValue={props.param.demoValue} optionList={props.param.optionList} validValue={props.param.validValue}
                    onChange={(value: unknown) => {
                        let cfg = props.cfg;
                        if (cfg[props.cate] !== undefined) {
                            (cfg[props.cate] as any)[props.param.param] = value;
                        }
                        props.onChange(cfg);
                    }} />

            </Space>
        </Card>
    );
}

export interface GlobalCfgPanelProps {
    cfg: Config;
    onChange: (cfg: Config) => void;
}

export default function GlobalCfgPanel(props: GlobalCfgPanelProps) {

    const [modalCfgCate, setModalCfgCate] = useState("");
    const [modalParamList, setModalParamList] = useState<RuleParam[]>([]);

    return (
        <>
            <List>
                <List.Item>
                    <Card title="Build配置" bordered={false} style={{ width: "100%" }} extra={
                        <Button onClick={e => {
                            e.stopPropagation();
                            e.preventDefault();
                            const cate = "build";
                            setModalCfgCate(cate);
                            setModalParamList(BuildParamList.filter(param => {
                                if (props.cfg[cate] === undefined || props.cfg[cate][param.param] === undefined) {
                                    return true;
                                }
                            }));
                        }}>增加属性</Button>
                    }>
                        <List rowKey="param"
                            dataSource={BuildParamList.filter(param => props.cfg["build"] !== undefined && props.cfg["build"][param.param] !== undefined)}
                            renderItem={param => (
                                <List.Item>
                                    <ParamItem cfg={props.cfg} cate="build" param={param} onChange={cfg => props.onChange(cfg)} />
                                </List.Item>
                            )} />
                    </Card>
                </List.Item>
                <List.Item>
                    <Card title="Config配置" bordered={false} style={{ width: "100%" }} extra={
                        <Button onClick={e => {
                            e.stopPropagation();
                            e.preventDefault();
                            const cate = "config";
                            setModalCfgCate(cate);
                            setModalParamList(ConfigParamList.filter(param => {
                                if (props.cfg[cate] === undefined || props.cfg[cate][param.param] === undefined) {
                                    return true;
                                }
                            }));
                        }}>增加属性</Button>
                    }>
                        <List rowKey="param"
                            dataSource={ConfigParamList.filter(param => props.cfg["config"] !== undefined && props.cfg["config"][param.param] !== undefined)}
                            renderItem={param => (
                                <List.Item>
                                    <ParamItem cfg={props.cfg} cate="config" param={param} onChange={cfg => props.onChange(cfg)} />
                                </List.Item>
                            )} />
                    </Card>
                </List.Item>
                <List.Item>
                    <Card title="Processors配置" bordered={false} style={{ width: "100%" }} extra={
                        <Button onClick={e => {
                            e.stopPropagation();
                            e.preventDefault();
                            const cate = "processors"
                            setModalCfgCate(cate);
                            setModalParamList(ProcessorsParamList.filter(param => {
                                if (props.cfg[cate] === undefined || props.cfg[cate][param.param] === undefined) {
                                    return true;
                                }
                            }));
                        }}>增加属性</Button>
                    }>
                        <List rowKey="param"
                            dataSource={ProcessorsParamList.filter(param => props.cfg["processors"] !== undefined && props.cfg["processors"][param.param] !== undefined)}
                            renderItem={param => (
                                <List.Item>
                                    <ParamItem cfg={props.cfg} cate="processors" param={param} onChange={cfg => props.onChange(cfg)} />
                                </List.Item>
                            )} />
                    </Card>
                </List.Item>
                <List.Item>
                    <Card title="ConsoleReports配置" bordered={false} style={{ width: "100%" }} extra={
                        <Button onClick={e => {
                            e.stopPropagation();
                            e.preventDefault();
                            const cate = "console-reports"
                            setModalCfgCate(cate);
                            setModalParamList(ConsoleReportsParamList.filter(param => {
                                if (props.cfg[cate] === undefined || props.cfg[cate][param.param] === undefined) {
                                    return true;
                                }
                            }));
                        }}>增加属性</Button>
                    }>
                        <List rowKey="param"
                            dataSource={ConsoleReportsParamList.filter(param => props.cfg["console-reports"] !== undefined && props.cfg["console-reports"][param.param] !== undefined)}
                            renderItem={param => (
                                <List.Item>
                                    <ParamItem cfg={props.cfg} cate="console-reports" param={param} onChange={cfg => props.onChange(cfg)} />
                                </List.Item>
                            )} />
                    </Card>
                </List.Item>
                <List.Item>
                    <Card title="OutputReports配置" bordered={false} style={{ width: "100%" }} extra={
                        <Button onClick={e => {
                            e.stopPropagation();
                            e.preventDefault();
                            const cate = "output-reports"
                            setModalCfgCate(cate);
                            setModalParamList(OutputReportsParamList.filter(param => {
                                if (props.cfg[cate] === undefined || props.cfg[cate][param.param] === undefined) {
                                    return true;
                                }
                            }));
                        }}>增加属性</Button>
                    }>
                        <List rowKey="param"
                            dataSource={OutputReportsParamList.filter(param => props.cfg["output-reports"] !== undefined && props.cfg["output-reports"][param.param] !== undefined)}
                            renderItem={param => (
                                <List.Item>
                                    <ParamItem cfg={props.cfg} cate="output-reports" param={param} onChange={cfg => props.onChange(cfg)} />
                                </List.Item>
                            )} />
                    </Card>
                </List.Item>
            </List>

            {modalCfgCate != "" && (
                <Modal title="增加属性" open footer={null} bodyStyle={{ maxHeight: "calc(100vh - 200px)", overflowY: "auto" }}
                    onCancel={e => {
                        e.stopPropagation();
                        e.preventDefault();
                        setModalCfgCate("");
                        setModalParamList([]);
                    }}>
                    <List rowKey="param" dataSource={modalParamList} renderItem={item => (
                        <List.Item>
                            <Card title={item.param} bordered={false} style={{ width: "100%" }} extra={
                                <Button type="link" onClick={e => {
                                    e.stopPropagation();
                                    e.preventDefault();
                                    let cateCfg = props.cfg[modalCfgCate];
                                    if (cateCfg === undefined) {
                                        cateCfg = {};
                                    }
                                    (cateCfg as any)[item.param] = item.defaultValue;
                                    const cfg = props.cfg;
                                    cfg[modalCfgCate] = cateCfg;
                                    props.onChange(cfg);
                                    setModalCfgCate("");
                                    setModalParamList([]);
                                }}>增加属性</Button>
                            }>
                                <p>默认值:&nbsp;{JSON.stringify(item.defaultValue)}</p>
                            </Card>
                        </List.Item>
                    )} />
                </Modal>
            )}
        </>
    );
}